<div id="main-nav-container" class='main-nav'>

  <div class='flex-container'>
    <a href="/">
      <img class='logo-image' src='/assets/images/logo.png' />
    </a>
    <a href="/">
      <div class='flex-container'>
        <div class='logo-text'>
          -
        </div>

        <div class='logo-text'>
          Facility Management
        </div>
      </div>
    </a>

    <div class='logout-container'>
      <div class='logout-user-description'>
        <div>
          {{userName}}
        </div>

        <div *ngIf="authenticated" (click)='logout()' class='logout-text-div'>
          <div class='logout-text'>
            <span>Logout</span>
          </div>
        </div>

        <div *ngIf="!authenticated && !useBasicAuth" (click)='login()' class='logout-text-div'>
            <div class='login-text'>
                <span>Login</span>
            </div>
          </div>
      </div>
    </div>


  </div>

  <hr class='horizonal-line'  />

</div>
